<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--在这里写你的css-->
<div th:fragment="stylesheet">

</div>
<!--在这里写你的内容-->

<body th:fragment="content">

<!-- WRAPPER -->
<div id="wrapper">
    <!-- MAIN -->
    <div>
        <!-- MAIN CONTENT -->
        <div class="main-content">
            <div class="container-fluid">
                <div class="panel panel-profile">
                    <div class="clearfix">
                        <!-- LEFT COLUMN -->
                        <div class="profile-left">
                            <!-- PROFILE HEADER -->
                            <div class="profile-header">
                                <div class="overlay"></div>
                                <div class="profile-main">
                                    <img src="/static/common/assets/img/user2.png" class="img-circle"
                                         alt="Avatar">
                                    <h3 class="name" th:text="${doctor.nickName}" ></h3>
                                    <span class="online-status status-available">Available</span>
                                </div>
                                <div class="profile-stat">
                                    <div class="row">
                                        <div class="col-md-4 stat-item">
                                            45 <span>患者数</span>
                                        </div>
                                        <div class="col-md-4 stat-item">
                                            <span th:text="(${doctor.verify} eq 1)? '已认证':'未认证'"   ></span>
                                        </div>
                                        <div class="col-md-4 stat-item">
                                            <span th:text="${doctor.registeredDate}"></span><span>注册时间</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END PROFILE HEADER -->
                            <!-- PROFILE DETAIL -->
                            <div class="profile-detail">
                                <div class="profile-info">
                                    <h4 class="heading">基本信息</h4>
                                    <ul class="list-unstyled list-justify">
                                        <li><div class="col-md-6">编号</div><div class="col-md-6"><p th:text="${doctor.doctorId}"></p></div></li>
                                        <li><div class="col-md-6">真实姓名</div><div class="col-md-6"><p th:text="${doctor.realName}"></p></div></li>
                                        <li><div class="col-md-6">性别</div><div class="col-md-6"><p th:text="${doctor.sex}"></p></div></li>
                                        <li><div class="col-md-6">手机号码</div><div class="col-md-6"><p th:text="${doctor.telephone}"></p></div></li>
                                        <li><div class="col-md-6">工作地点</div><div class="col-md-6"><p th:text="${doctor.workinglocation}"></p></div></li>
                                        <!--<li><div class="col-md-6">科室</div><div class="col-md-6"><p th:text="${doctor.department}"></p></div></li>-->
                                        <li><div class="col-md-6">邮箱</div><div class="col-md-6"><p th:text="${doctor.email}"></p><br></div></li>
                                    </ul>
                                </div>
                                <div class="profile-info">
                                    <h4 class="heading">个人简介</h4>
                                    <p th:text="${doctor.introduction}"></p>
                                </div>
                                <!--<div class="profile-info">-->
                                    <!--<h4 class="heading">社交</h4>-->
                                    <!--<ul class="list-inline social-icons">-->
                                        <!--<li><a href="#" class="facebook-bg"><i class="fa fa-facebook"></i></a></li>-->
                                        <!--<li><a href="#" class="twitter-bg"><i class="fa fa-twitter"></i></a></li>-->
                                        <!--<li><a href="#" class="google-plus-bg"><i class="fa fa-google-plus"></i></a>-->
                                        <!--</li>-->
                                        <!--<li><a href="#" class="github-bg"><i class="fa fa-github"></i></a></li>-->
                                    <!--</ul>-->
                                <!--</div>-->
                                <div class="text-center">
                                    <button id="editProfile" class="btn btn-primary" data-target="#editModal"
                                            th:data-id="${doctor.telephone}" data-toggle="modal">编辑个人信息
                                    </button>
                                </div>
                            </div>
                            <!-- END PROFILE DETAIL -->
                        </div>
                        <!-- END LEFT COLUMN -->
                        <!-- RIGHT COLUMN -->

                        <div class="profile-right">
                            <h4 class="heading">详细信息</h4>
                            <!-- AWARDS -->
                            <div class="awards">
                                <div class="row">
                                    <div class="col-md-4 col-sm-6">
                                        <div class="award-item">
                                            <div class="hexagon">
                                                <span class="lnr lnr-sun award-icon"></span>
                                            </div>
                                            <span>资格证编号<p th:text="${doctor.certificateId}"></p></span>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                        <div class="award-item">
                                            <div class="hexagon">
                                                <span class="lnr lnr-map-marker  award-icon"></span>
                                            </div>
                                            <span>所在医院<p th:text="${doctor.hospital}"></p></span>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                        <div class="award-item">
                                            <div class="hexagon">
                                                <span class="lnr lnr-pencil award-icon"></span>
                                            </div>
                                            <span>教育程度<p th:text="${doctor.education}"></p></span>
                                        </div>
                                    </div>
                                </div>
                                <!--<div class="text-center"><a href="#" class="btn btn-default">See all awards</a></div>-->
                            </div>
                            <!-- END AWARDS -->
                            <!-- TABBED CONTENT -->
                            <div class="custom-tabs-line tabs-line-bottom left-aligned">
                                <ul class="nav" role="tablist">
                                    <li class="active"><a href="#tab-bottom-left1" role="tab" data-toggle="tab">工作经历</a></li>
                                    <!--<li><a href="#tab-bottom-left2" role="tab" data-toggle="tab">工作经历<span-->
                                            <!--class="badge">7</span></a></li>-->
                                </ul>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane fade in active" id="tab-bottom-left1">
                                    <ul class="list-unstyled activity-timeline">
                                        <li>
                                            <i class="fa fa-comment activity-icon"></i>
                                            <p>2017年9月—至今中山第二附属医院，担任内科医生。<a href="#"></a> <span class="timestamp">2 minutes ago</span>
                                            </p>
                                        </li>
                                        <li>
                                            <i class="fa fa-cloud-upload activity-icon"></i>
                                            <p>2014年7月—2017年8郫县第一诊所，担任门诊急诊科。 <a href="#"></a><a href="#">
                                               </a> <span class="timestamp">7 hours ago</span></p>
                                        </li>
                                        <li>
                                            <i class="fa fa-plus activity-icon"></i>
                                            <p>2014年3月—2014年6月成都华侨医院，担任见习医生。<a href="#"><span class="timestamp">Yesterday</span></p>
                                        </li>

                                    <div class="margin-top-30 text-center"><a href="#" class="btn btn-default">See all
                                        activity</a></div>
                                </div>
                                <div class="tab-pane fade" id="tab-bottom-left2">
                                    <div class="table-responsive">
                                        <table class="table project-table">
                                            <thead>
                                            <tr>
                                                <th>Title</th>
                                                <th>Progress</th>
                                                <th>Leader</th>
                                                <th>Status</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td><a href="#">Spot Media</a></td>
                                                <td>
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                                                             aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                                            <span>60% Complete</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><img src="/static/common/assets/img/user2.png" alt="Avatar"
                                                         class="avatar img-circle"> <a href="#">Michael</a></td>
                                                <td><span class="label label-success">ACTIVE</span></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">E-Commerce Site</a></td>
                                                <td>
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" aria-valuenow="33"
                                                             aria-valuemin="0" aria-valuemax="100" style="width: 33%;">
                                                            <span>33% Complete</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><img src="/static/common/assets/img/user1.png" alt="Avatar"
                                                         class="avatar img-circle"> <a href="#">Antonius</a></td>
                                                <td><span class="label label-warning">PENDING</span></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Project 123GO</a></td>
                                                <td>
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" aria-valuenow="68"
                                                             aria-valuemin="0" aria-valuemax="100" style="width: 68%;">
                                                            <span>68% Complete</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><img src="/static/common/assets/img/user1.png" alt="Avatar"
                                                         class="avatar img-circle"> <a href="#">Antonius</a></td>
                                                <td><span class="label label-success">ACTIVE</span></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Wordpress Theme</a></td>
                                                <td>
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" aria-valuenow="75"
                                                             aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
                                                            <span>75%</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><img src="/static/common/assets/img/user2.png" alt="Avatar"
                                                         class="avatar img-circle"> <a href="#">Michael</a></td>
                                                <td><span class="label label-success">ACTIVE</span></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Project 123GO</a></td>
                                                <td>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-bar-success"
                                                             role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                                             aria-valuemax="100" style="width: 100%;">
                                                            <span>100%</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><img src="/static/common/assets/img/user1.png" alt="Avatar"
                                                         class="avatar img-circle"/> <a href="#">Antonius</a></td>
                                                <td><span class="label label-default">CLOSED</span></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Redesign Landing Page</a></td>
                                                <td>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-bar-success"
                                                             role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                                             aria-valuemax="100" style="width: 100%;">
                                                            <span>100%</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><img src="/static/common/assets/img/user5.png" alt="Avatar"
                                                         class="avatar img-circle"/> <a href="#">Jason</a></td>
                                                <td><span class="label label-default">CLOSED</span></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- END TABBED CONTENT -->
                        </div>
                        <!-- END RIGHT COLUMN -->

                    </div>
                </div>
            </div>
        </div>
        <!-- END MAIN CONTENT -->
    </div>
    <!-- END MAIN -->
    <div class="clearfix"></div>
    <footer>
        <div class="container-fluid">
            <p class="copyright">Copyright &copy; 2017.Company name All rights reserved.</p>
        </div>
    </footer>
</div>
<!-- END WRAPPER -->

<!-- 编辑-模态框（Modal） -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    修改个人基本信息
                </h4>
            </div>
            <div class="modal-body">
                <input id="idValue" type="text" class="hidden">
                <form name="update_health_info">
                    <div>
                        <div class="box-body ">
                            <label for="doctorId">编号</label>
                            <input id="doctorId" type="text" class="form-control" readonly="readonly">
                            <br>
                            <label for="realName">真实姓名</label>
                            <input id="realName" type="text" class="form-control" placeholder="输入真实姓名">
                            <br>
                            <label for="telephone">手机号码</label>
                            <input id="telephone" type="text" class="form-control" placeholder="输入手机号码">
                            <br>
                            <label for="workinglocation">工作地点</label>
                            <input id="workinglocation" type="text" class="form-control" placeholder="输入工作地点">
                            <br>
                            <label for="hospital">所在医院</label>
                            <input id="hospital" type="text" class="form-control" placeholder="输入所在医院">
                            <br>
                        </div>
                        <div class="box-body ">
                            <label for="email">邮箱</label>
                            <input id="email" type="text" class="form-control" placeholder="输入个人邮箱">
                            <br>
                            <label for="certificateId">资格证编号</label>
                            <input id="certificateId" type="text" class="form-control" placeholder="输入资格证编号">
                            <br>
                            <select id="education" class="form-control">
                                <option value="小学">小学</option>
                                <option value="初中">初中</option>
                                <option value="高中">高中</option>
                                <option value="本科">本科</option>
                                <option value="硕士">硕士</option>
                                <option value="博士">博士</option>
                            </select>

                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToUpdate" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<!--在这里定义或者引用你的script-->
<div th:fragment="script">

    <script>
        //编辑
        $("#editModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/doctor/selectById",
                {telephone:id},
                function (data) {
                    var doctor = data.value;
                    modal.find('#doctorId').val(doctor.doctorId)
                    modal.find('#realName').val(doctor.realName)
                    modal.find('#telephone').val(doctor.telephone)
                    modal.find('#workinglocation').val(doctor.workinglocation)
                    modal.find('#email').val(doctor.email)
                    modal.find('#certificateId').val(doctor.certificateId)
                    modal.find('#hospital').val(doctor.hospital)
                    modal.find('#education').val(doctor.education)
                }
            )
        })
        $("#sureToUpdate").click(function () {
            $.post(
                "/doctor/edit",
                {
                    doctorId: $("#doctorId").val(),
                    realName: $("#realName").val(),
                    telephone: $("#telephone").val(),
                    workinglocation: $("#workinglocation").val(),
                    email: $("#email").val(),
                    certificateId: $("#certificateId").val(),
                    hospital: $("#hospital").val(),
                    // education: $("#education").val(),
                },
                function (data) {
                    if(data.code==200){
                        alert("修改成功")
                        $("#wrapper").load("/doctor/doctorInfo")
                    }else{
                        alert("修改失败")
                    }
                }
            )
        })
    </script>
</div>

</html>